<template>
	<view class="details">
		<!-- 提示框 -->
		<view class="titleBox">
			<!-- 支付自动取消 -->
			<view class="paymentTime">
				<!-- 0=未付款,1=已支付,2=待接单,3=制作中,4=待配送,5=配送中,6=已送达,7=已完成,8=用户取消,9=商家取消,10=支付失败,11=已过期 -->
				<!-- <view class="text" v-if="pageData.status == 0">请在<view class="time">{{countdownm}}分{{countdowns}}秒</view>内完成支付</view>
				<view class="text" v-if="pageData.status == 0">过时订单将自动取消</view> -->
				<view class="text" v-if="pageData.status == 1">订单已支付</view>
				<view class="text" v-if="pageData.status == 10">订单已回购</view>
				<view class="text" v-if="pageData.status == 2">待商家接单</view>
				<view class="text" v-if="pageData.status == 3">商品制作中</view>
				<view class="text" v-if="pageData.status == 5">
					<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true" :markers="markers">
						<cover-view slot="callout">
						    <cover-view marker-id="1"></cover-view>
						    <cover-view marker-id="2"></cover-view>
						</cover-view>
					</map> 
				</view>
				<view class="text" v-if="pageData.status == 6">商品已送达</view>
				<view class="text" v-if="pageData.status == 4">商品待配送</view>
				<view class="text" v-if="pageData.status == 7">订单已完成</view>
				<view class="text" v-if="pageData.status == 8">用户取消</view>
				<view class="text" v-if="pageData.status == 9">商家取消</view>
				<view class="text" v-if="pageData.status == 11">未及时支付，订单已关闭</view>
				<view class="text" v-if="pageData.status == 12">商品已回购</view>
				<view class="text" v-if="pageData.status == 13">商家取消</view>
			</view>
			<!-- 地址 -->
			<view class="addressBox">
				<view class="address_t flex-r-s-c">
					<image src="/static/my/dz.png" mode=""></image>
					<view class="text">{{pageData.harvest_address}}</view>
				</view>
				<view class="address_b">{{pageData.harvest_user}} | {{pageData.harvest_phone}}</view>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="orderDetails">
			<view class="detailsBox flex-r-b-c">
				<image :src="heads.goods_img" mode=""></image>
				<view class="details_r">
					<view class="details_r_t flex-r-b-c">
						<view class="name">{{heads.goods_name}}</view>
						<view class="money" style="font-weight: 500;">¥{{pageData.goods_price}}</view>
					</view>
					<view class="details_r_b flex-r-b-s">
						<view class="Specifications">{{guige}}</view>
						<view class="quantity" style="font-size: 28rpx;">x{{pageData.num}}</view>
					</view>
				</view>
			</view>

			<view class="costBox">
				<view class="cost flex-r-b-c">
					<view class="text">打包费</view>
					<view class="money">¥{{pageData.packing_price}}</view>
				</view>
				<view class="cost flex-r-b-c" style="margin-top: 20rpx;">
					<view class="text">配送费</view>
					<view class="money">¥{{pageData.distribution_price}}</view>
				</view>
			</view>


			<view class="total flex-r-b-c">
				<view class=""> </view>
				<view class="total_r">
					<view class="text">共{{pageData.num}}件，合计：<view class="money">¥{{pageData.actual_price}}</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 时间 -->
		<view class="timeBox">
			<view class="text" v-if="pageData.order_time != null ">下单时间：{{pageData.order_time}}</view>
			<!-- '1970-01-01 08:00:00' -->
			<view class="text top" v-if="pageData.payment_time != null">付款时间：{{pageData.payment_time}}</view>
			<view class="text top" v-if="pageData.end_time != null">结束时间：{{pageData.end_time}}</view>
		</view>

		<!-- 客服 -->
		<view class="customerService flex-r-b-c">
			<view> </view>
			<button class="btn" hover-class='none' open-type="contact">
				<image src="/static/shop/kf.png" mode=""></image>
			</button>
		</view>


		<!-- 按钮 -->
		<view class="btnBox" v-if="pageData.status == 0 && timer != null">
			<button class="payment" @tap.stop="shareClick" open-type="share">发给好友</button>
			<view class="cancel" @tap="orderCancel">取消订单</view>
		</view>
		
		<view class="btnBox" v-if="pageData.status == 2">
			<view class="cancel" @tap="orderCancel">取消订单</view>
		</view>
		
		<view class="btnBox" v-if="pageData.status == 1 && pageData.is_huigou == 1">
			<view class="payment">提货</view>
			<view class="cancel" @tap="buyBack()">回购</view>
		</view>

		<view style="height: 96rpx;"></view>

	</view>
</template>
<script>
	const bmap = require("../../../libs/bmap-wx.js");
	export default {
		data() {
			return {
				latitude: "31.146740",
				longitude: "121.527690",
				scale: 0.1,
				markers: [
					{
						id: 1,
						latitude: "31.146840",
						longitude: "121.527690",
						width: 26, 
						height: 30,
						iconPath:require('static/my/hyhgbj.png'),
						callout: { 
							content: "  正在配送中 ",
							color: "#5d5d5d",
							fontSize: "12", 
							borderRadius: "10",
							bgColor: "#ffffff",
							padding: "10",
							display:"ALWAYS",
						},
					},
					{
						id: 2,
						width: 21,
						height: 24,
						latitude: "31.146850",
						longitude: "121.548680",
						customCallout: {
							anchorY: 0, // Y轴偏移量
							anchorX: 200, // X轴偏移量
							display: "ALWAYS" // 一直展示
						},
					}
				],
				image: this.$base.smallimgUrl,
				orderid: '',
				pageData: {},
				countdownm: '',
				countdowns: '',
				guige: '',
				timer: null,
				share: {},
				heads:{},
				order_number:'',
			};
		},
		onLoad(el) {
			this.heads = JSON.parse(el.res)
			console.log(el,'el')
			this.order_number = this.heads.order_number
			this.getOrderDetails()
			
			var BMap = new bmap.BMapWX({
				ak: "cK64LkDp4M85bafn5A6P0PYTylUgRWmZ", // 你的ak
			  });
			
			console.log(BMap,'BMapBMap');
		},
		onShareAppMessage(){
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功',
						icon: "none"
					})
					this.share = {}
					console.log(res)
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onUnload() {
			let that = this
			if(that.timer){
				clearInterval(that.timer);
				that.timer= null;
			}
		},
		methods: {
			// 点击确定，发给好友
			shareClick(){
				this.share = {
					title: this.heads.goods_name,
					path: `/pages/purchase/purchase?order_number=${this.order_number}&goods_img=${this.heads.goods_img}&goods_name=${this.heads.goods_name}`,
					// path: `/pages/tabBar/home/home`,
					imageUrl: this.heads.goods_img,
					desc: '',
					content: ''
				}
			},
			// 获取订单详情
			getOrderDetails() {
				let that = this
				that.$api.orderDetials({
					order_number: that.order_number
				}).then(res => {
					let guige = []
					that.pageData = res.data.data
					// console.log(that.pageData)
					res.data.data.minitype.length == 0 ? that.guige = '无' : res.data.data.minitype.map(e => {
						// guige.push(e.child)
						guige.push(e)
					})
					that.guige = guige.join('+')
					if(that.pageData.status == 0){
						that.timer = setInterval(() => {
							that.showtime()
						},1000)
					}
					
				})
			},
			// 倒计时
			showtime() {
				let that = this
				let nowtime = (new Date().getTime()/1000).toFixed(0),
				    lefttime = this.pageData.overdue_time - nowtime,
					leftm = Math.floor(lefttime / 60 % 60) < 10 ? "0" + Math.floor(lefttime / 60 % 60):Math.floor(lefttime / 60 % 60), //计算分钟数
					lefts = Math.floor(lefttime % 60) < 10 ? "0" + Math.floor(lefttime % 60) : Math.floor(lefttime % 60); //计算秒数
					
				that.countdownm = leftm //返回倒计时的字符串
				that.countdowns = lefts //返回倒计时的字符串
				
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					that.countdownm = that.countdowns = "00"
					clearInterval(that.timer)
				}
			},
			// 点击回购
			buyBack(){
				let that = this
				that.$api.orderHg({
					order_number: that.order_number,
				}).then(res => {
					that.$utils.toast('回购成功')
					setTimeout(() => {
						that.getOrderDetails()
					},1000)
				})
			},
			// 点击提货
			pickUpGoods(){
				let that = this
				that.$api.orderTh({
					order_number: that.order_number,
				}).then(res => {
					that.$utils.toast('提货成功')
					setTimeout(() => {
						that.getOrderDetails()
					},1000)
				})
			},
			// 取消订单
			orderCancel(){
				let that = this
				that.$api.cancelOrder({
					order_number: that.order_number
				}).then(res => {
					that.$utils.toast('取消成功')
					setTimeout(() => {
						that.getOrderDetails()
					},2000)
				})
			}
			
		}

	}
</script>

<style lang="less">
	page {
		background: #f9f9f9;
	}
	.map{
		width: 104%;
	}
	
	.details {
		width: 100vw;

		.titleBox {

			.paymentTime {
				width: 90%;
				margin: 20rpx auto;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				text-align: center;

				.time {
					display: inline-block;
					color: #000;
					font-weight: 500;
				}

				.text {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
				}
			}


			.addressBox {
				width: 90%;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin: 40rpx auto;

				.address_t {
					font-size: 28rpx;
					font-weight: 400;

					image {
						width: 24rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}

				.address_b {
					font-size: 24rpx;
					font-weight: 400;
					color: #7F8084;
					margin-top: 20rpx;
				}
			}

		}



		.orderDetails {
			width: 90%;
			margin: 40rpx auto;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.detailsBox {
				width: 100%;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #F9F9F9;

				image {
					width: 139rpx;
					height: 154rpx;
				}

				.details_r {
					width: 70%;

					.details_r_t {
						font-size: 28rpx;
						font-weight: 400;
					}

					.details_r_b {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;

						.Specifications {
							width: 60%;
						}
					}
				}
			}


			.costBox {
				width: 100%;
				padding: 30rpx 0rpx;
				border-bottom: 1px solid #F9F9F9;

				.cost {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
				}
			}


			.total {
				padding: 20rpx 0rpx;

				.total_r {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;

					.money {
						display: inline-block;
						font-size: 32rpx;
						color: #000;
					}
				}
			}


		}

		.timeBox {
			width: 90%;
			margin: 40rpx auto 0rpx;
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;

			.text {
				font-size: 28rpx;
				font-weight: 400;
				color: #474747;
			}

			.top {
				margin-top: 20rpx;
			}
		}

		.customerService {
			width: 90%;
			margin: 20rpx auto;

			.btn {
				padding: 0;
				margin: 0;
				width: 64rpx;
				height: 60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.btn::after {
				border: none;
			}
		}


		.btnBox {
			width: 90%;
			margin: 40rpx auto;
			margin-top: 80rpx;

			.payment {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 96rpx;
				background-color: #000;
				font-size: 28rpx;
				font-weight: 400;
				margin-bottom: 30rpx;
				color: #fff;
			}

			.cancel {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 96rpx;
				background-color: #DCDCDC;
				font-size: 28rpx;
				font-weight: 400;
				color: #7F8084;
			}
		}


	}
</style>
